<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title>Checkbox Widget Demo</title>

<script type="text/javascript">

	var djConfig = {isDebug: true};

</script>
<script type="text/javascript" src="../../dojo.js"></script>
<script language="JavaScript" type="text/javascript">

	dojo.require("dojo.widget.Checkbox");

</script>
<script>
function outputValues(form){
	var str = "";
	for(var i=0;i<form.elements.length;i++){
		var e = form.elements[i];
		if(e.type=="submit") break;
		str += "submit: name="+e.name+" id="+e.id+" value="+e.value +" disabled="+e.disabled+" checked=" + e.checked + "<br>";
	}
	dojo.byId("result").innerHTML = str;
	return false;
}

dojo.addOnLoad(function(){
	var params = {id: "cb6", widgetId: "cb6", name: "cb6"};
	var widget = dojo.widget.createWidget("Checkbox", params, document.getElementById("checkboxContainer"));
});
</script>
</head>
<body style="padding: 50px;">

<p>
Here are some checkboxes.  Try clicking, and hovering:
</p>

<p>
<form onSubmit="return outputValues(this);">
	<input type="checkbox" name="cb0" id="cb0" />
		<label for="cb0">cb0: Vanilla (non-dojo) checkbox (for comparison purposes)</label>
	<br>
	<input type="checkbox" name="cb1" widgetId="cb1" value="foo" dojoType="Checkbox">
		<label for="cb1">cb1: normal checkbox, with value=foo</label>
	<br>
	<input type="checkbox" name="cb2" id="cb2" dojoType="Checkbox" checked="checked"/>
		<label for="cb2">cb2: normal checkbox, initially turned on</label>
	<br>
	<input type="checkbox" name="cb3" id="cb3" dojoType="Checkbox" disabled="disabled">
		<label for="cb3">cb3: disabled checkbox</label>
	<br>
	<input type="checkbox" name="cb4" id="cb4" dojoType="Checkbox" disabled="disabled" checked="checked"/>
		<label for="cb4">cb4: disabled checkbox, turned on</label>
	<br>
	<input type="checkbox" name="cb5" id="cb5" />
		<label for="cb5">cb5: Vanilla (non-dojo) checkbox (for comparison purposes)</label>
	<br>
	<div id="checkboxContainer"></div>
		<label for="checkboxContainer">cb6: instantiated from script</label>
	<br>
	<input type="submit" />
</form>
</p>
<p>Submitted data:</p>
<div id="result"></div>

</body>
</html>
